<template>
    <div>
        <el-icon :size="20">
            <Memo />
        </el-icon>
        <commonAvatarList :avatars="avatars" max-show="4" size="40px" overlap="20px" border-color="#fff"></commonAvatarList>
        <!-- max-show : 最多显示 2 个头像（3-1），超出部分用「+N」 -->
        <!--size: 头像尺寸 -->
        <!-- overlap 头像重叠偏移 -->
        <!-- border-color 头像边框颜色 -->
    </div>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column v-for="(column, index) in tableC" :key="index" :prop="column.prop" :label="column.label">
            <template #default="scope">
                <component :is="renderCell(scope.row, column)" />
            </template>
        </el-table-column>
    </el-table>
</template>
  
<script setup>
import { Memo } from '@element-plus/icons-vue'
import commonAvatarList from "../../components/commonAvatarList.vue";

import { h } from 'vue';

const tableData = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 28 }
];
const avatars = [
    'https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar',
    'https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar',
    'https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar',
    'https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar',
]

const tableC = [
    { prop: 'id', label: 'ID', style: { color: 'blue' } },
    { prop: 'name', label: 'Name', style: { fontWeight: 'bold' } },
    { prop: 'age', label: 'Age', style: { color: 'green' } }
];

const handleIdClick = (id) => {
    alert(`Clicked ID: ${id}`);
};

const renderCell = (row, column) => {
    if (column.prop === 'id') {
        return h(
            'div',
            {
                style: {
                    ...column.style,
                    cursor: 'pointer',
                    background: 'none',
                    border: 'none',
                    padding: 0,
                    fontSize: 'inherit',
                    color: 'blue',
                    width: '200px',
                    height: '20px',
                    background: 'red',
                },
                onClick: () => handleIdClick(row.id)
            },
            row[column.prop]
        );
        // return (h('el-icon', null, {
        //     default: () => h(Memo),
        // }))
    }

    // 其他列保持为 span 显示
    return h('span', { style: column.style }, row[column.prop]);
};
</script>
